<template>
  <div class="header">
		<router-link tag="i" to="/" v-show="isShow" 
			class="header-goback iconfont icon-fanhui" :style="styleObj"></router-link>
		<img src="" alt="">
		<div class="header-fixed" v-show="!isShow" :style="styleObj">
			<router-link tag="i" to="/" 
				class='iconfont icon-fanhui header-back'></router-link>
		  <h2>景点详情</h2>
		</div>
  </div>
</template>

<script>
  export default {
    name:'LikeHeader',
		data(){
			return {
				isShow: true,
				styleObj: {},
			}
		},
		methods:{
			getScroll(){
				// 获取当前相对于页面顶部的鼠标坐标
				let scrollTop = document.documentElement.scrollTop
				if(scrollTop>50){
					this.isShow = false
					// 透明度渐变
					this.styleObj = {
						opacity: (scrollTop-40)/100
					}
				}else {
					this.isShow = true
					this.styleObj = {
						opacity: (100-scrollTop*2)/100
					}
				}
			}
		},
		activated() {
			// scroll 鼠标移动值
			// 监听window的scroll的变化
			// 变化时执行getScroll函数
			window.addEventListener('scroll',this.getScroll)
		},
		deactivated() {
			// window事件是能对全局监听的, 也就是说在其他组件内也会监听着
			// 因此当当前组件不活跃时, 取消这个事件的绑定
			window.removeEventListener('scroll',this.getScroll)
		}
  }
</script>

<style lang='stylus' scoped>
.header
	position:fixed
	left:0
	top:0
	right:0
	z-index:1
	.header-goback
		position:absolute
		width: .8rem
		height: .8rem
		line-height: .8rem
		border-radius: 50%
		text-align: center
		background: rgba(0, 0, 0, .8)
		color:#fff
	.header-fixed[data-v-88f4207a]
		top:-14px
	.header-fixed
		position:relative
		background:#00bcd4
		line-height:.86rem
		color:#fff
		text-align:center
		.header-back
			position:absolute
			left:0
			top:0
			width:.8rem
			color:#fff
		h2
			text-align:center
			font-size:.32rem
	
</style>
